<template>
	<view class="table-wrap">
		<scroll-view scroll-x class="table">
			<view class="table-loading" v-if="loading">
				<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
			</view>
			<view class="table-tr">
				<view class="table-th" :style="`min-width:${item.width};`" v-for="(item, index) in columns"
					:key="index">{{ item.label }}</view>
			</view>
			<view class="table-tr table-empty" v-if="tableData.length === 0">
				暂无数据
			</view>
			<view v-if="tableData.length !== 0" class="table-tr" v-for="(item, index) in tableData" :key="index"
				@click="rowClick($event, item, index)" @touchmove.stop>
				<view v-for="(column, columnIndex) in columns" :index="columnIndex"
					:class="['table-td', `table-td-${index}-${columnIndex}`]" :style="`min-width:${column.width};`"
					@longpress="colLongpress($event, `.table-td-${index}-${columnIndex}`, item[column.value])"
					@touchend="touchend">
					<view class="text-overflow-ellipsis" v-if="!column.slot">
						{{ getColumnValue(item, column) }}
					</view>

					<slot v-else :row="item" :index="index" :name="column.slot"></slot>
				</view>
			</view>
		</scroll-view>
		<view class="uni-pagination-box" v-if="pagination">
			<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" />
		</view>
		<!-- PAD TIPS -->
		<Tooltip ref="table-tooltip">{{tooltipText}}</Tooltip>
	</view>
</template>

<script>
	import Tooltip from '@/components/tooltip/index.vue';
	import fetch from "@/utils/fetch";

	export default {
		components: {
			Tooltip,
		},
		props: {
			tableData: {
				type: Array,
				default () {
					return [];
				}
			},
			tooltip: {
				type: Boolean,
				default: true
			},
			total: {
				type: Number,
				default: 0
			},
			columns: {
				type: Array,
				default () {
					return [];
				}
			},
			pagination: {
				type: Boolean,
				default: false
			},
			src: {
				type: String
			},
			params: {
				type: Object,
				default () {
					return {};
				}
			},
			data: {
				type: Object,
				default () {
					return {};
				}
			},
			requestType: {
				type: String,
				default: 'get'
			},
		},
		data() {
			return {
				headers: [],
				columnkeys: [],
				tableData: [],
				tooltipText: '',
				pageSize: 10,
				pageCurrent: 1,
				total: 0,
				loading: false
			}
		},
		methods: {
			getColumnValue(item, column) {
				if (column.type === 'number') {
					if (column.formatter) {
						return column.formatter(item[column.value])
					} else {
						return item[column.value];
					}
				} else {
					if (column.formatter) {
						return column.formatter(item[column.value])
					} else {
						return item[column.value] || '--';
					}
				}
			},
			colLongpress(e, className, value) {
				const that = this;
				e.stopPropagation();
				if (!this.tooltip) return;
				this.tooltipText = value;
				uni.createSelectorQuery().select(className).boundingClientRect((res) => {
					that.$refs['table-tooltip'].open(e.currentTarget.offsetLeft + (res.width / 2) + 45, e
						.currentTarget.offsetTop + 150)
				}).exec();
			},
			touchend() {
				if (!this.tooltip) return;
				this.$refs['table-tooltip'].close();
			},
			rowClick(e, item, index) {
				this.$emit('rowClick', item, index);
			},
			reload() {
				this.selectedIndexs = []
				this.getData(1)
			},
			// 分页触发
			change(e) {
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			// 获取数据
			getData(pageCurrent) {
				this.loading = true
				const params = {};
				if (this.pagination) {
					this.pageCurrent = pageCurrent;
					params.pageSize = this.pageSize;
					params.pageNum = this.pageCurrent;
				}
				fetch(this.requestType, this.src, {
					...params,
					...this.params
				}, {
					...params,
					...this.data
				}).then((res) => {
					this.loading = false;
					this.tableData = res.records;
					if (this.pagination) {
						this.total = res.total;
					}
				});
			},
		},
		mounted() {
			this.headers = this.columns.map(item => item.label);
		}
	}
</script>

<style scoped lang="scss">
	.table-wrap {
		display: flex;
		flex-direction: column;
		// width: 90.5vw;
	}

	.table {
		max-width: 90.5vw;
		display: flex;
		flex-direction: column;
		border: 1px solid #ecf0f2;
		border-radius: 2rem;
		position: relative;
		overflow: hidden;

		.table-loading {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(255, 255, 255, 0.8);
		}

		.table-empty {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 4rem 0;
			font-size: 2rem;
		}

		.table-tr {
			display: flex;
			flex-direction: row;
			min-width: 15rem;
		}

		.table-th {
			flex: 1;
			min-width: 15rem;
			background: #edf1f3;
			font-size: 2rem;
			text-align: center;
			padding: 2rem 0;
			overflow: hidden;
		}

		.table-td {
			flex: 1;
			min-width: 15rem;
			font-size: 2rem;
			text-align: center;
			padding: 1.8rem 0;
			overflow: hidden;
			border-top: 1upx solid #ecf0f2;
		}

		.text-overflow-ellipsis {
			width: 80%;
			padding: 0;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin: 0 auto;
		}
	}

	/deep/ .uni-pagination-box {
		display: flex;
		justify-content: flex-end;
		margin-top: 2rem;
		font-size: 2rem;

		.uni-pagination__total {
			font-size: 2rem;
		}

		.uni-pagination__btn {
			font-size: 2rem;
		}

		.uni-pagination__num {
			font-size: 2rem;
		}

		.uni-pagination__num-tag {
			width: 6rem;
		}
	}
</style>